In creating graphics-oriented applications, such as Hypertext Markup Language (HTML) Web pages, Rich Internet Applications (RIAs), and the like, designers often obtain graphics files from graphics designers that will be used as templates to generate the application graphics. The graphics designers typically create the graphics files using graphics design and drawing applications, such as MACROMEDIA INC.'s FIREWORKS™ and FREEHAND™, ADOBE SYSTEMS, INC.'s PHOTOSHOP™ and ILLUSTRATOR™, and the like. The application designers generally use application development environments (ADEs), such as MACROMEDIA, INC.'s DREAMWEAVER™ and FLEX BUILDER™, ADOBE SYSTEMS, INC.'s GO LIVE™, MICROSOFT CORPORATION's FRONT PAGE™, and the like, to create the application. The application developers may use the graphics files as templates in creating the application graphics.
In the typical application workflow, the design of the application is often performed visually. For example, in DREAMWEAVER™ and FLEX BUILDER™, the designer may work in a design view mode, in which the designer graphically manipulates screen or interface objects using manual manipulation. More complicated logic functions may be created using a code view mode, in which the designer inputs code, whether HTML code, or other application-compatible code, such as MACROMEDIA INC.'s MXML™, ACTIONSCRIP™, and the like. By combining the graphical design in the design view mode, with the logic-intensive design in the code view, the application designer may create various graphics-related applications.
During design time, the application designer will typically want to match the prepared template graphics as closely as possible. In order to do that, the designer sets design guides onto the design canvas. Design guides are usually just straight lines, either vertical or horizontal, that help designers layout or align various object within the design canvas. Depending on what type of graphic is being used, the designer may have a certain amount of leeway to modify the drawing or relationship in creating the application interface. In other instances, such as when the graphics are logos or other highly-structured items, there may be a standard set of rules that will be strictly followed. In such strict, rules-based designs, the application designer will generally strictly follow each of the rules to create as near of an exact match to the prepared graphics as possible. Therefore, the precise location and positioning of the graphics becomes critical. This strict, rules-based design methodology is, thus, typically one of the more common times that application designers use design guides. However, in creating the design of the application, some of the problems that may arise involve the spacing and size of certain objects on the design canvas. This information is useful in lining up the objects in the proper layout.
Additionally, even without using graphics templates, when a designer is initially creating and placing objects or graphics in a development environment, design guides are typically used to assist in properly spacing and aligning the various objects and graphics.
Depending on the type of application under design, it may also be useful to know the positioning using different units of measure, such as pixels, inches, centimeters, and the like. Additional application types allow reliance on percentages to describe and create the object relationships on the design canvas. A percentage measurement describes the percentage of the available space or canvas where the specific object or design guide is located. Examples of applications that may use percentages are HTML tables, MACROMEDIA INC.'s FLEX™ interface layouts, and the like. Tools exist in current ADE's to assist designers and developers measure the various distances and sizes of the design objects. Such tools typically consist of additional rulers that the designer may select and position across the screen objects. However, such rulers are merely additional user interface (UI) elements for the designer to learn and plot out onto the design canvas. While these existing tools allow the designer/developer to obtain the layout information, the additional time used in manipulating the UI elements adds to the cost of creating the application.